<template>
	<view class="manage" v-if="onManage">
		<view class="closemanage" @tap="close" />
		<view class="manage_box">
			<image class="manage_avatar" :src="ThechosenOneInfo.user.avatarUrl" />
			<text class="text-white">
				{{ThechosenOneInfo.user.nickName}}
			</text>
		</view>
		<text class="manage_close text-white" @tap="close">
			
			<image class="back_xx" @tap="close" src="@/static/zhibo/guanbi.png" />
		</text>
		<view class="manage_feature">
			<text class="text-white manage_btn fs-26" @tap="speaking">禁言</text>
			<text class="text-white manage_btn fs-26" @tap="play">踢出直播间</text>
			<text class="text-white manage_btn fs-26" @tap="shield">拉黑</text>
		</view>
		<view class="manage_join">
			<!-- 					<view class="join_item">
						<image class="join_img" src="@/static/zhibo/shipinT.png" />
						<text class="text-white fs-26">视频链接</text>
					</view> -->
			<view class="join_item" @tap="openApply">
				<image class="join_img" src="@/static/zhibo/yuyinT.png" />
				<text class="text-white fs-26">语音连麦</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			'onManage': {
				type: Boolean,
				default: false
			},
			'ThechosenOneInfo': {
				type: Object,
				default: {}
			},
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				this.$emit("closeManage")
			},
			//拉黑
			async shield() {
				console.log(this.ThechosenOneInfo);
				const res = await uni.$api.user['shield']({
					live_id: this.ThechosenOneInfo.live_id,
					user_id: this.ThechosenOneInfo.user_id
				})
				if (res) {
					console.log(res, '拉黑'); // 打印响应数据
				}
			},
			//踢人
			async play() {
				const res = await uni.$api.user['play']({
					live_id: this.ThechosenOneInfo.live_id,
					user_id: this.ThechosenOneInfo.user_id
				})
				if (res) {
					console.log(res, '踢人'); // 打印响应数据
				}
			},
			async speaking() {
				const res = await uni.$api.user['speaking']({
					live_id: this.ThechosenOneInfo.live_id,
					user_id: this.ThechosenOneInfo.user_id
				})
				if (res) {
					console.log(res, '禁言'); // 打印响应数据
				}
			},
			async openApply() {
				const res = await uni.$api.user['lienmai']({
					live_id: this.ThechosenOneInfo.live_id,
					user_id: this.ThechosenOneInfo.user_id
				})
				if (res) {
					this.$emit("closeManage")
					// this.$emit("openApply")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.text-white {
		color: #fff;
	}

	.manage_btn {
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50rpx;
		background-color: rgb(42, 41, 46);
	}

	.fs-26 {
		font-size: 26rpx;
	}

	//管理人员
	.manage {
		width: 750rpx;
		height: 630rpx;
		position: fixed;
		bottom: 0;
		border-radius: 40rpx 40rpx 0 0;
		background-color: rgb(26, 25, 30);
		padding: 20rpx
	}

	.closemanage {
		width: 750rpx;
		height: 900rpx;
		position: fixed;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 1000;
	}

	.manage_box {
		position: fixed;
		bottom: 520rpx;
		left: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.manage_avatar {
		width: 130rpx;
		height: 130rpx;
		border-radius: 65rpx;
		margin-bottom: 10rpx
	}

	.manage_close {
		width: 700rpx;
		height: 150rpx;
		text-align: right;
	}

	.manage_feature {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		height: 100rpx;
		width: 700rpx;
	}

	.manage_btn {
		width: 200rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50rpx;
		background-color: rgb(42, 41, 46);
	}

	.manage_join {
		width: 700rpx;
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 50rpx;
	}

	.join_item {
		width: 320rpx;
		height: 200rpx;
		border-radius: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgb(42, 41, 46);
	}

	.join_img {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 30rpx;
	}
</style>